<template>
    <table-search
        :current-page='table.pages'
        :page-size='table.size'
        :total='table.total'
        @size-change='handleSizeChange'
        @current-change='handleCurrentChange'
    >
        <template #search>
            <el-row :gutter='15' class='clear-both'>
                <el-col :span='24'>
                    <card-list title='高级搜索' type='keyvalue' :show-header='true'>
                        <template #btn>
                            <el-button-group>
                                <el-button icon='Search' size='mini' @click='submit'>搜索</el-button>
                            </el-button-group>
                        </template>
                        <template #keyvalue>
                            <el-form ref='refForm' class='card-list-form' :model='form' :rules='rules' size='mini'>
                                <el-row :gutter='15'>
                                    <card-list-item width='100px' prop='name'>
                                        <template #key>委托单位名称</template>
                                        <template #value>
                                            <el-input v-model='form.client' placeholder='请输入委托单位名称' />
                                        </template>
                                    </card-list-item>
                                </el-row>
                            </el-form>
                        </template>
                    </card-list>
                </el-col>
            </el-row>
        </template>
        <el-table
            ref='filterTable'
            row-key='id'
            highlight-current-row
            border
            :data='tableData.records'
            style='width: 100%;'
        >
            <el-table-column prop='id' label='id' width='100' />
            <el-table-column prop='project' label='项目名称' column-key='project' />
            <el-table-column prop='clients.client' label='委托单位名称' />
            <el-table-column prop='contracts' label='联系人' />
            <el-table-column prop='tel' label='联系方式' />
            <el-table-column prop='finish' label='状态' />
            <el-table-column prop='regDate' label='注册时间' sortable />
        </el-table>
    </table-search>
</template>

<script lang='ts'>
import { defineComponent, reactive, ref } from 'vue'
import TableSearch from '/@/components/TableSearch/index.vue'
import CardList from '/@/components/CardList/CardList.vue'
import CardListItem from '/@/components/CardList/CardListItem.vue'
// 网络请求
import { getTableList } from '/@/api/Project'
import { validate } from '/@/utils/formExtend'
// table结构
import { IProjectTableList } from '/@/type/views/Project/ProjectList'

interface ISearchForm {
    client: string
}

// 键值对样式，及表单校验
const search = (table: ITable<IProjectTableList>, form: ISearchForm) => {
    const rules = reactive({})
    const refForm = ref(null)
    const submit = async() => {
        if (!await validate(refForm)) return
        table.pages = 1
        await renderTableList(table, form)
    }
    return {
        rules,
        submit,
        refForm
    }
}

const renderTableList = async(table: ITable<IProjectTableList>, form: ISearchForm) => {
    const d = await getTableList({ page: table.pages, pageSize: table.size,...form })
    table.records = d.data.data.records
    table.total = d.data.data.total
}

const tableRender = (table: ITable<IProjectTableList>, form: ISearchForm) => {
    renderTableList(table, form)
    const handleSizeChange = (v: number) => (table.size = v) && renderTableList(table, form)
    const handleCurrentChange = (v: number) => (table.pages = v) && renderTableList(table, form)
    return { table, handleSizeChange, handleCurrentChange }
}

export default defineComponent({
    name: 'ProjectList',
    components: {
        TableSearch,
        CardList,
        CardListItem,
    },
    setup() {
        const form: ISearchForm = reactive({
            client: ''
        })

        // const
        const tableData: ITable<IProjectTableList> = reactive({
            records: [],
            total: 0,
            pages: 1,
            size: 20
        })
        return {
            form,
            tableData,
            ...tableRender(tableData, form),
            ...search(tableData, form)
        }
    }
})
</script>
